<template id="Bill_details">
    <div>
        <div class="Bill_details_shop">
            <img src="../image/blue_da.png" alt="" @click="go_balance()">
            <h4>账单明细</h4>
        </div>
        <ul class="Bill_details_list">
            <li @click="get_record('list')"><span   v-bind:class="{'show_type': isA}" >消费记录</span></li>
            <li @click="get_record('income')"><span v-bind:class="{'show_type': isB}">返现记录</span></li>
        </ul>
        <p class="boeder_bill"></p>
        <div class="Back_now" v-for="(item,index) in data">
            <div class="Bill_details_record">
                <p>{{item.tips}}</p>
                <p>{{item.time}}</p>
                <p>交易流水号:{{item.order_sn}}</p>
                <span>{{item.flag}}¥{{item.money}}</span>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name :'Bill_details',
        data(){
            return{
                bill:true,
                type_id:'',
                act:'',
                act1:'',
                isA: false,
                isB: true,
                data:[],
                is_more:true,
                type:'list',
                page:1,
            }
        },
        mounted:function(){

            //初始化
            this.get_record(this.type);

            //分页更多
            //this.more();
        },
        methods:{
            go_balance:function(){
                this.$router.push('/my_balance')
            },
            get_record:function(type){

                //获取资金记录
                let info        = [];
                info['c']       = 'Userpower';
                info['m']       = 'money_list';
                info['page']    = this.page;
                info['type']    = type;
               
                if(type == 'list'){
                    this.data = [];
                    this.isA  = true;
                    this.isB  = false;
                }
                if(type == 'income'){
                     this.data = [];
                     this.isA = false;
                     this.isB = true;
                }

                 this.GLOBAL.getApi(this,info);
            },
            more:function(){

                //分页
                this.page++;

                let info        = [];
                info['c']       = 'Userpower';
                info['m']       = 'money_list';
                info['page']    = this.page;
                info['type']    = this.type;
               
                this.GLOBAL.getApi(this,info);
               
            },
        }
    }
</script>
<style>
    .show_type{
        border-bottom:0.01rem solid #2eaffc;
        color:#2eaffc;
    }
    .Bill_details_consumption span{
        position:absolute;
        display:block;
        height:0.5rem;
        line-height:0.5rem;
        text-align:center;
        font-size:0.24rem;
        color:#fc1dac;
        right:0.2rem;
        top:0.18rem;
    }
    .Bill_details_consumption p:nth-of-type(3){
        height:0.3rem;
        line-height:0.3rem;
        color:#707070;
        font-size:0.2rem;
        text-indent: 0.3rem;
    }
    .Bill_details_consumption p:nth-of-type(2){
        height:0.42rem;
        line-height:0.42rem;
        color:#707070;
        font-size:0.2rem;
        text-indent: 0.3rem;
    }
    .Bill_details_consumption p:nth-of-type(1){
        height:0.5rem;
        line-height:0.5rem;
        color:#464646;
        font-size:0.26rem;
        text-indent: 0.3rem;
    }
    .Bill_details_consumption{
        width:100%;
        height:1.45rem;
        border-bottom:0.01rem solid #f0f0f0;
        padding-top:0.18rem;
        position:relative;

    }
    .consumption{
        width:100%;
        min-height:2rem;
    }
    .Back_now{
        width:100%;
        min-height:2rem;
    }
    .Bill_details_record span{
        position:absolute;
        display:block;
        height:0.5rem;
        line-height:0.5rem;
        text-align:center;
        font-size:0.24rem;
        color:#fc1dac;
        right:0.2rem;
        top:0.18rem;
    }
    .Bill_details_record p:nth-of-type(3){
        height:0.3rem;
        line-height:0.3rem;
        color:#707070;
        font-size:0.2rem;
        text-indent: 0.3rem;
    }
    .Bill_details_record p:nth-of-type(2){
        height:0.42rem;
        line-height:0.42rem;
        color:#707070;
        font-size:0.2rem;
        text-indent: 0.3rem;
    }
    .Bill_details_record p:nth-of-type(1){
        height:0.5rem;
        line-height:0.5rem;
        color:#464646;
        font-size:0.26rem;
        text-indent: 0.3rem;
    }
    .Bill_details_record{
         width:100%;
        height:1.45rem;
        border-bottom:0.01rem solid #f0f0f0;
        padding-top:0.18rem;
        position:relative;

    }
    /*账单明细列表*/
    .boeder_bill{
        height:0.1rem;
        width:100%;
        background:#f5f4f2;
    }
    .Bill_details_list{
        width:3.88rem;
        height:0.69rem;
        display: flex;
        margin:0 auto;
    }
    .Bill_details_list li{
        flex:1;
        color:#373737;
        font-size:0.24rem;
        text-align:center;
        line-height:0.69rem;
        list-style:none;
    }
    .Bill_details_list li span{
        display:inline-block;
    }
    /*列表哦*/
    .Bill_details_shop{
        height:0.74rem;
        width:100%;
        border-bottom:1px solid #f0f0f0;
        position:relative;
        background:#ffffff;
    }
    .Bill_details_shop img{
        height:0.36rem;
        width:0.36rem;
        display:block;
        position:absolute;
        left:0.25rem;
        top:0.2rem;
    }
    .Bill_details_shop h4{
        height:0.74rem;
        color:#77c5fd;
        font-size:0.3rem;
        line-height:0.79rem;
        text-align:center;
        font-weight:normal;
    }
  </style>
